<template>
  <div class="remark-container" v-loading="remarkListLoading">
    <div class="remark-content" v-if="remarkList.length > 0">
      <div class="title">
        评论 <span>{{ total }}</span>
      </div>
      <div
        class="remark-item"
        v-for="(item, index) in remarkList"
        :key="item.id"
      >
        <div class="avatar" @click="otherUserInfo(item.userId)">
          <el-image
            :src="item.avatar || defaultAvatar"
            style="border-radius: inherit"
          ></el-image>
        </div>
        <div class="item-info">
          <div class="info-header">
            <div class="nickname" @click="otherUserInfo(item.userId)">
              {{ item.name }}
            </div>
            <div class="create-time">{{ formatDate(item.remarkTime) }}</div>
          </div>
          <div class="content">
            <span v-html="item.content"></span>
            <el-link
              class="option"
              type="info"
              :underline="false"
              v-show="item.userId === userModule.getUser().id"
            >
              ...
              <span class="option-item">
                <el-popconfirm
                  title="确定删除该评论吗？"
                  @confirm="deleteRemark(item.id)"
                >
                  <span class="text" slot="reference">删除</span>
                </el-popconfirm>
              </span>
            </el-link>
          </div>
          <div class="thumbs">
            <div class="up" @click="thumbs(item, 1)">
              <svg
                width="16"
                height="16"
                viewBox="0 0 48 48"
                :fill="item.isThumbs === 1 ? 'rgb(140, 197, 255)' : 'none'"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M27.6002 18.5998V11.3998C27.6002 8.41743 25.1826 5.99977 22.2002 5.99977L15.0002 22.1998V41.9998H35.9162C37.7113 42.0201 39.2471 40.7147 39.5162 38.9398L42.0002 22.7398C42.1587 21.6955 41.8506 20.6343 41.1576 19.8373C40.4645 19.0403 39.4564 18.5878 38.4002 18.5998H27.6002Z"
                  stroke="#999"
                  stroke-width="4"
                  stroke-linejoin="round"
                />
                <path
                  d="M15 22.0001H10.194C8.08532 21.9628 6.2827 23.7095 6 25.7994V38.3994C6.2827 40.4894 8.08532 42.0367 10.194 41.9994H15V22.0001Z"
                  :fill="item.isThumbs === 1 ? 'rgb(140, 197, 255)' : 'none'"
                  stroke="#999"
                  stroke-width="4"
                  stroke-linejoin="round"
                />
              </svg>
              <span>{{ item.thumbsCount }}</span>
            </div>
            <div class="down" @click="thumbs(item, 0)">
              <svg
                width="16"
                height="16"
                viewBox="0 0 48 48"
                :fill="item.isThumbs === 0 ? 'rgb(250, 194, 194)' : 'none'"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M20.3793 29.4002V36.6002C20.3793 39.5826 22.7969 42.0002 25.7793 42.0002L32.9793 25.8002V6.00023H12.0633C10.2682 5.97994 8.73244 7.2853 8.46327 9.06023L5.97927 25.2602C5.82077 26.3045 6.12885 27.3657 6.82192 28.1627C7.51499 28.9597 8.52311 29.4122 9.57927 29.4002H20.3793Z"
                  stroke="#999"
                  stroke-width="4"
                  stroke-linejoin="round"
                />
                <path
                  d="M32.9795 6.00017H37.7855C39.8942 5.96288 41.6968 7.51019 41.9795 9.60017V22.2002C41.6968 24.2901 39.8942 26.0375 37.7855 26.0002H32.9795V6.00017Z"
                  :fill="item.isThumbs === 0 ? 'rgb(250, 194, 194)' : 'none'"
                  stroke="#999"
                  stroke-width="4"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="remark-empty" v-else>
      <el-empty description="暂无评论"></el-empty>
    </div>
  </div>
</template>

<script>
import up from "@/assets/thumbs-up.svg";
import down from "@/assets/thumbs-down.svg";
import { deleteRemark, thumbs } from "@/api/user/remark";
import defaultAvatar from "@/assets/defaultAvatar.png";
import userModule from "@/utils/userInfo";
import { Notification } from "element-ui";
import { addVisitor } from "@/api/user/user";
export default {
  name: "RemarkView",
  data() {
    return {
      defaultAvatar,
      userModule,
      up,
      down,
    };
  },
  props: {
    remarkList: {
      type: Array,
      default: () => [],
    },
    total: {
      type: Number,
      default: 0,
    },
    remarkListLoading: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    // 查看其他用户信息
    async otherUserInfo(userId) {
      const currentUserid = userModule.getUser().id;
      if (userId === currentUserid) {
        this.$router.push("/private");
      } else {
        // 添加访问量
        const res = await addVisitor({ id: userId });
        this.$router.push({ name: "other", params: { id: userId } });
      }
    },
    // 时间格式判断
    padZero(num) {
      return num < 10 ? "0" + num : num;
    },
    // 时间格式化
    formatDate(timeArray) {
      if (!timeArray) return "暂无时间";
      let year = timeArray[0];
      let month = this.padZero(timeArray[1]);
      let day = this.padZero(timeArray[2]);
      let hour = this.padZero(timeArray[3]);
      let minute = this.padZero(timeArray[4]);
      let second = this.padZero(timeArray[5]) || "00";
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    // 删除评论
    async deleteRemark(id) {
      const notify = Notification({
        title: "提示",
        message: "删除中...",
        showClose: false,
        iconClass: "el-icon-loading",
        duration: 0,
      });
      try {
        const res = await deleteRemark(id);
        notify.close();
        Notification.success({
          title: "成功",
          message: "删除成功",
          duration: 2000,
        });
        // 删除成功后，重新获取评论列表
        this.$emit("getRemarkList");
      } catch {
        notify.close();
        Notification.error({
          title: "失败",
          message: "删除失败",
          duration: 2000,
        });
      }
    },
    // 赞与踩
    async thumbs(item, status) {
      // 若为-1，表示只初始化过，直接进行赞或踩操作
      if (item.isThumbs === -1) {
        const res = await thumbs({ remarkId: item.id, isThumbs: status });
      } else {
        // 若不为-1，表示已经进行过赞或踩操作，此时对比传来的status是否与当前状态一样
        if (item.isThumbs === status) {
          // 若一样则表示取消赞或踩，直接更改状态为-1
          const res = await thumbs({ remarkId: item.id, isThumbs: -1 });
        } else {
          // 若不一样则表示进行赞或踩操作，直接更改状态为status
          const res = await thumbs({ remarkId: item.id, isThumbs: status });
        }
      }
      this.$emit("getRemarkList");
    },
  },
};
</script>

<style lang="less" scoped>
.remark-container {
  padding: 20px 20px;
  text-align: left;
  .remark-content {
    .title {
      font-size: 19px;
      padding-bottom: 4px;
      border-bottom: 1px solid #ddd;
      span {
        font-size: 15px;
        color: #999;
      }
    }
    .remark-item {
      display: flex;
      margin-top: 20px;
      margin-left: 16px;
      .avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        cursor: pointer;
      }
      .item-info {
        margin-left: 10px;
        padding-bottom: 10px;
        width: 100%;
        border-bottom: 1px solid #ddd;
        .info-header {
          margin: 8px 0;
          display: flex;
          align-items: flex-end;
          .nickname {
            font-size: 17px;
            color: #777;
            cursor: pointer;
          }
          .create-time {
            margin-left: 8px;
            font-size: 14px;
            color: #aaa;
          }
        }
        .content {
          span {
            display: inline-block;
            width: 96%;
          }
          .option {
            position: relative;
            width: 4%;
            height: 26px;
            line-height: 26px;
            font-size: 20px;
            &:hover {
              color: #409eff;
            }
            &:hover .option-item {
              display: block;
              color: #999;
            }
            .option-item {
              display: none;
              position: absolute;
              top: 26px;
              left: -50px;
              width: 100px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              font-size: 15px;
              border-radius: 4px;
              background-color: #fff;
              box-shadow: 0 0 5px #ccc;
              &:hover .text {
                width: 100%;
                height: 30px;
                line-height: 30px;
                border-radius: inherit;
                background-color: #eee;
              }
            }
          }
        }
        .thumbs {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 112px;
          height: 24px;
          .up,
          .down {
            display: flex;
            align-items: flex-end;
            width: 56px;
            height: 16px;
            cursor: pointer;
            span {
              margin-left: 4px;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}

// 解决elementui中el-radio报错：Blocked aria-hidden on an element because its descendant retained focus.
/deep/ .el-radio__original {
  display: none !important; /* 隐藏原生 radio 输入，但仍然允许交互 */
}

/deep/.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
  .el-radio__inner {
  box-shadow: none !important;
}
</style>